Плаваючий (липкий) хедер спрощує навігацію сайтом. З технічної точки зору, найчастіше цю техніку реалізують за допомогою JavaScript-коду. Але також липкий хедер можна створити і за допомогою простих CSS-правил, які ми розглянемо в цій статті.
Основна CSS-команда, яка вам знадобиться, щоб створити плаваючий хедер у своєму Shopify-магазині виглядає так:
position: sticky;
Простота такого рішення має негативні особливості:
- Не можна застосувати анімацію при переході хедера з фіксованого стану у плаваюче.
- Не можна вибрати, які саме блоки хедера мають бути плаваючими, а які залишаться фіксованими. Наприклад, якщо в хедері вашої теми є текстове оголошення або навігація сайту, то всі ці блоки у складі загального хедера будуть також плаваючими.
- Підтримка браузерами властивості sticky не абсолютна. У більшості випадків старі версії браузерів не підтримують цю властивість. Це означає, що в таких браузерах ваш хедер залишиться фіксованим, начебто ви не застосовували до нього параметр "sticky". На даний момент параметр працюватиме у 95% користувачів браузерів. Тут ви можете побачити актуальні відомості про підтримку параметру "sticky".
Якщо ви встановили у свій магазин одну з безкоштовних Шопіфай-тем, а техніка плаваючого хедера там не впроваджена, вам достатньо додати наступний код до секції header.liquid вашої теми (на початку або наприкінці файлу):
<style>
#shopify-section-header {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 100;
background-color: white; /* Вказуємо фоновий колір хедера на випадок, якщо він прозорий */
}
</style>
Якщо ж у вашому магазині встановлено кастомну або платну тему, вам варто звернутися до розробників або підтримки своєї теми. Чи просто залиште у коментарях посилання на свій магазин, щоб ми допомогли вам знайти рішення.
Залишити коментар